<template>
    <div class="header">
        服务流程
    </div>
    <img src="../assets/banner3.png" alt="" width="100%" height="260">
    <div style="width: 100%;">
        <img src="../assets/process.png" alt="" width="92%" style="padding-left: 20px; padding-top: 10px;">
    </div>

    <van-tabbar v-model="active">
        <van-tabbar-item icon="wap-home" to="/">小滴服务</van-tabbar-item>
        <van-tabbar-item icon="todo-list" to="/qyhome">企业项目</van-tabbar-item>
        <van-tabbar-item icon="wechat-moments">服务流程</van-tabbar-item>
        <van-tabbar-item icon="graphic" to="/ptfc">平台风采</van-tabbar-item>
        <van-tabbar-item icon="friends" :to="({ name: 'login' })">我的小滴</van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import { ref } from 'vue'
const active = ref(2)
</script>

<style scoped>
/* 头部样式 */
.header {
    height: 50px;
    width: 100%;
    background-color: #178d8d;
    font-size: 25px;
    line-height: 50px;
    text-align: center;
    color: white;
    font-weight: 800;
}
/* 编辑css的样式 */
.van-tabbar-item {
    font-size: 15px;
}

:deep(.van-tabbar-item__icon) {
    font-size: 30px !important;
}
</style>